<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

	<head>
		<meta charset="utf-8">
		<title>信息管理系统</title>

		<link href="../static/assets/css/dpl-min.css" rel="stylesheet">
		<link href="../static/assets/css/bui-min.css" rel="stylesheet">

	</head>

	<body>
		<div class="demo-content">
			<style>
				.bui-stdmod-body {
					overflow-x: hidden;
					overflow-y: auto;
				}
				
				.error {
					color: red;
				}
				
				.bui-tab-item {
					position: relative;
				}
				
				.bui-tab-item .bui-tab-item-text {
					padding-right: 25px;
				}
				
				.bui-tab-item .icon-remove {
					position: absolute;
					right: 2px;
					top: 2px;
					z-index: 20;
					cursor: pointer;
				}
				
				.top-header {
					width: 300px;
					height: 50px;
					float: right;
				}
			</style>

			<div class="row" style="padding-left: 15px;">
				<form style="padding-top: 10px;padding-left: 10px;padding-bottom: 20px;">
					<div class="span24">
						<div class="control-group span8">
							<label class="control-label"><spring:message code="name"/>：</label>
							<div class="controls">
								<input type="text" placeholder="<spring:message code="inputName"/>" class="input-normal control-text">
							</div>
						</div>
						<div class="control-group span8">
							<label class="control-label"><spring:message code="telephoneNumber"/>：</label>
							<div class="controls">
								<input type="text" placeholder="<spring:message code="telephoneNumber"/>" class="input-normal control-text">
							</div>
						</div>
						<div class="control-group span8">
							<label class="control-label"><spring:message code="account"/>：</label>
							<div class="controls">
								<input type="text" placeholder="<spring:message code="gitlabUser"/> " class="input-normal control-text">
							</div>
						</div>
					</div>
					<div class="span24">
						<div class="control-group span8" style="margin-top:5px ;margin-bottom: 10px;;">
							<label class="control-label"><spring:message code="credit"/>：</label>
							<div class="controls">
								<input type="text" placeholder="<spring:message code="inputCredit"/>" class="input-normal control-text">
							</div>
						</div>
						<div class="control-group span8" style="margin-top:5px ;">
							<label class="control-label"><spring:message code="grade"/>：</label>
							<div class="controls">
								<input type="text" placeholder="<spring:message code="inputGrade"/>" class="input-normal control-text">
							</div>
						</div>
						<div class="control-group span8" style="margin-top: 0px;">
							<label class="control-label"><spring:message code="emile"/>：</label>
							<div class="controls control-row4">
								<input type="text" placeholder="<spring:message code="inputEmile"/>" class="input-normal control-text">
								<button type="reset" class="button"><spring:message code="reset"/></button>
								<button type="submit" class="button button-success" id="searchSubmit"><spring:message code="inquire"/></button>
							</div>
						</div>
					</div>
				</form>
				<!--
		        	作者：lee
		        	时间：2018-08-30
		        	描述：操作按钮
		        -->
				<div class="row">
					<div class="span24">
						<tr>
							<th colspan="5">
								<ul class="toolbar">
									<li><button id="addbtn" class="button button-primary"><spring:message code="add"/></button></li>
									<li><button id="delbtn" class="button button-danger"><spring:message code="delete"/></button></li>
									<li><button id="editbtn" class="button button-checked"><spring:message code="modify"/></button></li>
									<li><button id="alterBtn" class="button button-inverse"><spring:message code="modifyPermission"/></button></li>
								</ul>
							</th>
						</tr>
					</div>
				</div>

				<!--
			    	作者：lee
			    	时间：2018-08-29
			    	描述：添加弹出框显示内容
			    -->
				<!-- 此节点内部的内容会在弹出框内显示,默认隐藏此节点-->
				<div id="addcontent" class="hide">
					<form id="J_Form" class="form-horizontal">
						<div class="row">
							<div class="control-group span24" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="name"/>：</label>
								<div class="control-group span3">
									<input type="text" id="addName" placeholder="<spring:message code="inputName"/>" class="input-normal control-text" disabled="disabled">
								</div>
								<label class="control-label"><spring:message code="emile"/>：</label>
								<div class="control-group span3">
									<input type="text" id="addEmile" data-rules="{required:true,email:true}" placeholder="<spring:message code="inputEmile"/>" class="input-normal control-text" disabled="disabled">
								</div>
							</div>

						</div>
						<div class="row">
							<div class="control-group span24" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="account"/>：</label>
								<div class="control-group span3">
									<input type="text" id="addAccount" data-rules="{required:true}" placeholder="<spring:message code="gitlabUser"/>" class="input-normal control-text" name="gitlab">
								</div>
								<label class="control-label"><spring:message code="telephoneNumber"/>：</label>
								<div class="control-group span3">
									<input type="text" id="addTelephoneNumber" data-rules="{required:true}" placeholder="<spring:message code="telephoneNumber"/>" class="input-normal control-text" name="tel">
								</div>
							</div>
						</div>
						<div class="row" style="margin-top: 15px;">
							<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="100%" color=#987cb9 SIZE=2>
						</div>
						<div class="row">
							<div class="control-group span24" style="padding-top: 10px;">
								<label class="control-label"><b><spring:message code="credit"/>：</b></label>
								<div class="control-group span3">
									<input type="text" placeholder="<spring:message code="inputCredit"/>" class="input-normal control-text" name="credit" id="creditID">
								</div>
								<label class="control-label"><b><spring:message code="getCode"/>：</b></label>
								<div class="control-group span3">
									<input type="text" placeholder="<spring:message code="inputGrade"/>" class="input-normal control-text" name="score">
								</div>
							</div>
						</div>
					</form>
					<form id="J_Form" class="form-horizontal">
						<div class="row">
							<div class="control-group span24" style="padding-top: 10px;">
								<div class="control-group span14">
									<h2 style="text-align: center;"><b><spring:message code="context"/>：</b></h2>
								</div>
							</div>
						</div>
						<div class="search-grid-container">
							<div id="fewgrid"></div>
						</div>
					</form>
				</div>

				<!--
                    	作者：lee
                    	时间：2018-08-31
                    	描述：编辑弹窗
                    -->

				<div id="editcontent" class="hide">
					<form id="F_Form" class="form-horizontal">
						<div class="row">
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="name"/>：</label>
								<div class="row">
									<input type="text" placeholder="<spring:message code="inputName"/>" class="input-normal control-text" disabled="disabled">
								</div>
							</div>
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="telephoneNumber"/>：</label>
								<div class="row">
									<input type="text" data-rules="{required:true}" placeholder="<spring:message code="telephoneNumber"/>" class="input-normal control-text" name="tel">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="account"/>：</label>
								<div class="row">
									<input type="text" data-rules="{required:true}" placeholder="<spring:message code="gitlabUser"/>" class="input-normal control-text" name="gitlab">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="emile"/>：</label>
								<div class="row">
									<input type="text" data-rules="{required:true,email:true}" placeholder="<spring:message code="inputEmile"/>" class="input-normal control-text" disabled="disabled">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="credit"/>：</label>
								<div class="row">
									<input type="text" placeholder="<spring:message code="inputCredit"/>" class="input-normal control-text" name="credit">
								</div>
							</div>
							<div class="row" style="padding-top: 10px;">
								<label class="control-label"><spring:message code="getCode"/>：</label>
								<div class="row">
									<input type="text" placeholder="<spring:message code="inputGrade"/>" class="input-normal control-text" name="score">
								</div>
							</div>
						</div>
					</form>
				</div>

				<!--
			    	作者：lee
			    	时间：2018-08-29
			    	描述：修改权限弹框
			    	-->

				<div id="alterQ" class="hide">
					<div class="control-group span10">
						<div id="s1">
							<label class="control-label"><spring:message code="permission"/>：</label>
							<input type="hidden" id="hide" value="b" name="hide">
						</div>
					</div>
				</div>

				<!--
                	作者：lee
                	时间：2018-08-30
                	描述：删除弹框
                -->
				<div id="delete" class="hide">
					<p> <spring:message code="verify"/> <spring:message code="delete"/></p>
				</div>
				
				
				
				<!--
		        	作者：lee
		        	时间：2018-08-30
		        	描述：信息列表框
		        -->
			</div>
			
			<!--
            	作者：lee
            	时间：2018-09-03
            	描述：总表单显示DIV
            -->
			<div class="search-grid-container">
				<div id="grid"></div>
			</div>

		</div>
		<!--script依赖注入-->
		<script type="text/javascript" src="../static/assets/js/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="../static/assets/js/bui.js"></script>
		<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
		<script type="text/javascript" src="../static/assets/js/config.js"></script>
 		<script src="../static/assets/js/jquery.validate.min.js"></script>
		<script src="../static/assets/js/ReminderSetting.js"></script>
		<!--script编辑-->
		<script type="text/javascript">
			//标签
			BUI.use(['bui/tab', 'bui/mask'], function(Tab) {
				var tab = new Tab.TabPanel({
					srcNode: '#tab',
					elCls: 'nav-tabs',
					itemStatusCls: {
						'selected': 'active'
					},
					panelContainer: '#panel' //如果不指定容器的父元素，会自动生成
						//selectedEvent : 'mouseenter',//默认为click,可以更改事件
				});
				tab.render();
			});

			//主页面总表单
			BUI.use(['bui/grid', 'bui/data'], function(Grid, Data) {
				<!--结果显示框显示框-->
				var Grid = Grid,
					Store = Data.Store,
					allcolumns = [{
                        title: '<spring:message code="id"/>',
                        width: 0,
                        sortable: false,
                        dataIndex: 'userId'
                    },{
						title: '<spring:message code="id"/>',
						width: 100,
						sortable: false,
						dataIndex: 'infoId'
					}, {
						title: '<spring:message code="name"/>',
						width: 100,
						sortable: false,
						dataIndex: 'chineseName'
					}, {
						title: '<spring:message code="telephoneNumber"/>',
						width: 100,
						sortable: false,
						dataIndex: 'telNumber'

					}, {
						title: '<spring:message code="account"/>',
						width: 100,
						sortable: false,
						dataIndex: 'gitlabNumber'

					}, {
						title: '<spring:message code="emile"/>',
						width: 150,
						sortable: false,
						dataIndex: 'email'
					}, {
						title: '<spring:message code="credit"/>',
						width: 100,
						sortable: false,
						dataIndex: 'credit'
					}, {
						title: '<spring:message code="grade"/>',
						width: 100,
						sortable: false,
						dataIndex: 'grade'
					}];

				//表单链接
				var allstore = new Store({
						url: '/data/userInfo',
						autoLoad: true,
						pageSize: 10
					}),

					allgrid = new Grid.Grid({
						render: '#grid',
						loadMask: true,
						forceFit: true,
						columns: allcolumns,
						store: allstore,
						plugins: [Grid.Plugins.CheckSelection, Grid.Plugins.AutoFit], //勾选插件、自适应宽度插件
						// 底部工具栏
						// 顶部工具栏
						bbar: {
							//items 也可以在此配置
							// pagingBar:表明包含分页栏
							pagingBar: true
						}

					});
				<!---->
				allgrid.render();


				//添加弹出框学分、成绩表单
				fewcolumns = [{
					title: '<spring:message code="credit"/> ',
					width: 300,
					sortable: false,
					dataIndex: 'credit'
				}, {
					title: '<spring:message code="grade"/>',
					width: 250,
					sortable: false,
					dataIndex: 'grade'
				}];

				//表单链接
				var fewstore = new Store({
						url: '/data/addSelect1/1',
						autoLoad: true,
						pageSize: 5
					}),

					fewgrid = new Grid.Grid({
						render: '#fewgrid',
						loadMask: true,
						forceFit: true,
						columns: fewcolumns,
						store: fewstore,

					});
				<!---->
				fewgrid.render();


				//总表单的序列化，分页
				form.on('beforesubmit', function(ev) {
					//序列化成对象
					var obj = form.serializeToObject();
					obj.start = 0; //返回第一页
					store.load(obj);
					return false;
				});
			});

			//修改权限弹框选择
			BUI.use('bui/select', function(Select) {
				var items = [{
						text: '管理员',
						value: 'a'
					}, {
						text: '普通用户',
						value: 'b'
					}],
					select = new Select.Select({
						render: '#s1',
						valueField: '#hide',
						items: items
					});
				select.render();
			});
			//弹窗
			BUI.use('bui/overlay', function(Overlay) {
				//添加按钮弹窗
				$('#addbtn').on('click', function() {
                    var a =  $(".bui-grid-row-selected").children("td").eq(1).find('.bui-grid-cell-text').html();
					alert(a);
					f(a);
                    var dialog = new Overlay.Dialog({
						title: '<spring:message code="add"/>',
						width: 620,
						height: 400,
						closeAction: 'destroy', //每次关闭dialog释放
						//配置添加容器的编号
						contentId: 'addcontent',
						buttons:[{
						    text: '<spring:message code="add"/>',
                            elCls: 'button button-success',
                            handler: function() {
                                //新增确认弹框
                                BUI.Message.Show({
                                    msg: '<spring:message code="verify"/><spring:message code="add"/>？',
                                    icon: 'question',
                                    buttons: [{
                                        text: '<spring:message code="add"/>',
                                        elCls: 'button button-success',
                                        handler: function() {
                                            dialog.close();
                                            this.close();
                                        }
                                    }, {
                                        text: '<spring:message code="cancel"/>',
                                        elCls: 'button button-disabled',
                                        handler: function() {
                                            this.close();
                                        }
                                    }]
                                });
                            },
                            },
							{
                            text: '<spring:message code="cancel"/>',
                            elCls: 'button button-disabled',
                            handler: function() {
                                this.close();
                            }
						    }],
					});

					dialog.show();
				});

				//编辑弹窗
				$('#editbtn').on('click', function() {
					var dialog = new Overlay.Dialog({
						title: '<spring:message code="modify"/>',
						width: 320,
						height: 300,
						closeAction: 'destroy', //每次关闭dialog释放
						//配置添加容器的编号
						contentId: 'editcontent',
						buttons:[{
                            text: '<spring:message code="modify"/>',
                            elCls: 'button button-success',
                            handler: function() {
                                //新增确认弹框
                                BUI.Message.Show({
                                    msg: '<spring:message code="verify"/><spring:message code="modify"/>？',
                                    icon: 'question',
                                    buttons: [{
                                        text: '<spring:message code="cancel"/>',
                                        elCls: 'button button-success',
                                        handler: function() {
                                            dialog.close();
                                            this.close();
                                        }
                                    }, {
                                        text: '<spring:message code="cancel"/>',
                                        elCls: 'button button-disabled',
                                        handler: function() {
                                            this.close();
                                        }
                                    }]
                                });
                            },
                        },
                            {
                                text: '<spring:message code="cancel"/>',
                                elCls: 'button button-disabled',
                                handler: function() {
                                    this.close();
                                }
						}],
					});
					dialog.show();
				});

				//修改权限弹窗
				$('#alterBtn').on('click', function() {
					var dialog = new Overlay.Dialog({
						title: '<spring:message code="modifyPermission"/>',
						width: 300,
						height: 110,
						closeAction: 'destroy', //每次关闭dialog释放
						//配置DOM容器的编号
						contentId: 'alterQ',
						buttons:[{
                            text: '<spring:message code="permission"/>',
                            elCls: 'button button-success',
                            handler: function() {
                                //do some thing
                                this.close();
                            }
                        }, {
                            text: '<spring:message code="cancel"/>',
                            elCls: 'button button-disabled',
                            handler: function() {
                                this.close();
                            }
						}]
					});
					dialog.show();
				});

				//删除弹框
				$('#delbtn').on('click', function() {
					var dialog = new Overlay.Dialog({
						title: '<spring:message code="verify"/><spring:message code="delete"/>',
						width: 200,
						height: 120,
						closeAction:'destroy',
						//mask: false,
						contentId:'delete',

//					buttons:[]
						//删除确认弹窗
						buttons: [{
							text: '<spring:message code="delete"/>',
							elCls: 'button button-success',
							handler: function() {
								//do some thing
								this.close();
							}
						}, {
							text: '<spring:message code="cancel"/>',
							elCls: 'button button-disabled',
							handler: function() {
								this.close();
							}
						}],
					});
					dialog.show();


				});


			});
			function f(a) {
				var massge = {
					userId:a
				}
				$.ajax({
                    async: false,
                    type: "post",
                    url: "/data/addSelect",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(massge),
                    success: function(r){
                        document.getElementById('addName').value = r.data.chineseName;
                        document.getElementById('addEmile').value = r.data.email;
                        document.getElementById('addAccount').value = r.data.gitlabNumber;
                        document.getElementById('addTelephoneNumber').value = r.data.telNumber;
                    }
				})
            }
            function f(a) {
                var massge = {
                    userId:a
                }
                $.ajax({
                    async: false,
                    type: "post",
                    url: "/data/addSelect",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(massge),
                    success: function(r){
                        document.getElementById('addName').value = r.data.chineseName;
                        document.getElementById('addEmile').value = r.data.email;
                        document.getElementById('addAccount').value = r.data.gitlabNumber;
                        document.getElementById('addTelephoneNumber').value = r.data.telNumber;
                    }
                })
            }
		</script>

	</body>
</html>